<template>
	<view class="container">

		<view class="topExpress" style="position:relative;">
			<view class="topExpress-left">
				<image class="avatar" :src="userInfo.avatarUrl"></image>
			</view>
			<view class="topExpress-right">
				<view class="topExpress-right-top">{{shipperCode}}</view>
				<view class="topExpress-right-middle">{{shipperName}}</view>
				<button @click="onCopy(shipperCode)" class="copy-code">复制运单号</button>
			</view>
		</view>

		<!-- 物流时间轴 -->
		<view class="record-list">
			<!-- <view class="record-item">
				<view class="record-item-date" v-if="state == 2">运输中</view>
				<view class="record-item-date" v-else-if="state == 3">已签收</view>
				<view class="record-item-date" v-else-if="state == 4">快递如有疑问请联系客服</view>
			</view> -->

			<view class="record-item record-item-first">
				<view class="record-item-date">{{address}}</view>
			</view>

			<view v-for="(item, index) in traces" :key="index" class="record-item">
				<view class="record-item-date">{{item.date}} {{item.time}}</view>
				<view class="record-item-text">{{item.acceptStation}}</view>
			</view>

			<view class="record-item">
				<view class="record-item-date">卖家发货</view>
				<view class="record-item-text">{{shipDate}} {{shipTime}}</view>
			</view>
		</view>
	</view>
</template>

<script>
const util = require("../../../utils/util.js");
const api = require("../../../config/api.js");
const user = require("../../../utils/user.js");
const { clipboard } = require("../../../utils/utils");
const app = getApp();

export default {
	data()
	{
		return {
			orderId: 0,
			userInfo: {
				nickName: '点击登录',
				avatarUrl: 'http://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png'
			},
			traces: [],
			shipperName: "",
			shipperCode: "",
			address: "",
			state: 0,
			shipDate: "",
			shipTime: "",
			hasLogin: false
		};
	},

	components: {},
	props: {},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options)
	{
		// 页面初始化 options为页面跳转所带来的参数
		this.setData({
			orderId: options.orderId
		});
	},

	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function () { },

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function ()
	{
		//获取用户的登录信息
		if (app.globalData.hasLogin)
		{
			let userInfo = uni.getStorageSync('userInfo');
			this.setData({
				userInfo: userInfo,
				hasLogin: true
			});
			let that = this;
			util.request(api.ExpressTrace, {
				orderId: that.orderId
			}).then(function (res)
			{
				if (res.errno === 0)
				{
					that.setData({
						traces: res.data.traces,
						state: res.data.state,
						shipperName: res.data.shipperName,
						shipDate: res.data.shipDate,
						shipTime: res.data.shipTime,
						shipperCode: res.data.shipperCode,
						address: res.data.address
					});
				}
			});
		}
	},

	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function () { },

	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function () { },

	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function () { },

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function () { },

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function () { },
	methods: {
		onCopy(text)
		{
			clipboard.set(text);

			uni.showToast({
				title: '运单号复制成功',
				icon: 'none',
				duration: 2000
			});
		}
	}
};
</script>
<style>
page {
	height: 100%;
	width: 100%;
	background: #f4f4f4;
}

.container {
	background: #f4f4f4;
	height: auto;
	overflow: hidden;
	width: 100%;
}

.topExpress {
	background-color: #fff;
	margin: 30rpx;
	padding: 30rpx;
	border-radius: 8rpx;
	overflow: hidden;
	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
	display: flex;
}

.topExpress-left {
	width: 100rpx;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.topExpress-left .avatar {
	height: 100rpx;
	width: 100rpx;
	border-radius: 50%;
	text-align: center;
	float: left;
}

.topExpress-right {
	font-size: 26rpx;
	color: #333;
	display: flex;
	justify-content: space-around;
	flex-direction: column;
	align-items: flex-start;
	margin-left: 30rpx;
}

.topExpress-right-middle {
	font-size: 28rpx;
	color: #898b8d;
}

.topExpress-right-bottom {
	font-size: 28rpx;
	color: #666;
}

.expressRecord {
	width: 710rpx;
	padding-top: 30rpx;
	padding-bottom: 200rpx;
	background: #fff;
	margin: 0 auto;
	border-radius: 10rpx;
}

.expressRecord-getAddress {
	width: 100%;
	font-size: 28rpx;
	color: #999;
	display: flex;
}

.expressRecord-top {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.getAddress-icon {
	width: 30rpx;
	height: 30rpx;
	border-radius: 50%;
	font-size: 28rpx;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 152rpx;
}
.finish {
	background: #45dd09;
}
.unfinish {
	background: #f7f303;
}
.getAddress-text {
	margin-left: 20rpx;
}

.noReach-online-top-close {
	width: 1rpx;
	height: 50rpx;
	background: #999;
	margin-left: 165rpx;
}

.expressRecord-single-close {
	width: 100%;
	/* height: 122rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center; */
	position: relative;
}

.expressRecord-single-noReach-online-top-close {
	display: flex;
	flex-direction: column;
}

.online-top-closing {
	width: 2rpx;
	height: 100rpx;
	background: #999;
	margin-left: 165rpx;
}

.online-top-close {
	width: 2rpx;
	height: 50rpx;
	background: #999;
	margin-left: 165rpx;
}

.dot-close {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	margin-left: 155rpx;
	margin-top: 6rpx;
	margin-bottom: 6rpx;
	background: rgb(21, 216, 4);
}

.online-bottom {
	width: 2rpx;
	height: 100rpx;
	background: #999;
	margin-left: 165rpx;
}

.online-bottom-start {
	width: 2rpx;
	height: 50rpx;
	/* background: #999; */
	margin-left: 165rpx;
}

.expressRecord-text {
	margin-left: 30rpx;
}

.expressRecord-statusing {
	font-size: 28rpx;
	color: #999;
}

.expressRecord-status-address {
	font-size: 28rpx;
	color: #666;
}

.expressRecord-status {
	font-size: 35rpx;
	color: #999;
}

.expressRecord-date {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #666;
}

.expressRecord-date-text {
	font-size: 28rpx;
}

.expressRecord-date-time {
	font-size: 28rpx;
}

.topExpress-right-top {
	color: #212223;
	font-size: 28rpx;
}

.copy-code {
	color: #898b8d;
	font-size: 9pt;
	padding: 4rpx 5rpx;
	border-radius: 6rpx;
	float: right;
	margin-left: 20rpx;
	position: absolute;
	right: 15rpx;
	top: 35rpx;
}

.record-list {
	background-color: #fff;
	margin: 30rpx;
	border-radius: 8rpx;
	overflow: hidden;
	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
	padding: 30rpx 30rpx 30rpx 120rpx;
	color: #898b8d;
	font-size: 24rpx;
}

.record-item {
	margin-bottom: 60rpx;
	position: relative;
}

.record-item:last-child::before {
	display: none;
}

.record-item:before {
	content: '';
	display: block;
	position: absolute;
	width: 0;
	top: 6rpx;
	bottom: -64rpx;
	left: -61rpx;
	border-left: solid 1px #ddd;
}

.record-item-date {
	font-size: 24rpx;
	margin-bottom: 15rpx;
	position: relative;
}

.record-item-date:before {
	content: '';
	display: block;
	width: 16rpx;
	height: 16rpx;
	background-color: #b5b6b8;
	border-radius: 100%;
	position: absolute;
	left: -68rpx;
	top: 5rpx;
}

.record-item-first .record-item-date:before {
	content: '收';
	width: 40rpx;
	height: 40rpx;
	left: -78rpx;
	top: -3rpx;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(124deg, #f54c56 17%, #f95d20 83%);
}

.record-item-text {
	font-size: 24rpx;
	text-align: justify;
}
</style>